<template>
<div class="root">
	<div class="button-box">
		<el-button @click="handlerQuit">
			返回
		</el-button>
		<el-button @click="addRoomDialogFormVisible=true">
			创建房间
		</el-button>
		<el-button @click="getPageByType">
			刷新
		</el-button>
	</div>
<div class="RoomList">
	<el-table
	:data="roomPage.records"
	style="width:100%;height:100%;"
	v-loading="loading"
	>
	<el-table-column
	prop="id"
	label="ID"
	width="180"
	align="center"
	></el-table-column>
	<el-table-column
	prop="name"
	label="房间名"
	width="350"
	align="center"
	></el-table-column>
		<el-table-column
	prop="onlineNumber"
	label="在线人数"
	width="350"
	align="center"
	></el-table-column>
	<el-table-column
	prop="created"
	label="创建日期"
	width="350"
	align="center"
	></el-table-column>
	<el-table-column
	label="操作"
	width="250"
	align="center"
	>
	<template slot-scope="scope">
		<el-button @click="handlerJoin(scope.row)">加入</el-button>
	</template>
	</el-table-column>
	</el-table>
</div>
		<!--分页-->
		<el-pagination
			background
			layout="total,prev,pager,next,jumper"
			@current-change="handlerCurrentChange"
			:current-page="roomPage.current"
			:page-size="roomPage.size"
			:total="roomPage.total"
			style="text-align: center;margin-top: 50px;"
			></el-pagination>
			<el-dialog title="房间信息" :visible.sync="addRoomDialogFormVisible">
			<el-form :model="addRoomForm">
      		<el-form-item label="房间名" :label-width="formLabelWidth">
      			<el-input v-model="addRoomForm.name" autocomplete="off"></el-input>
    		</el-form-item>
  			</el-form>
  			<div slot="footer" class="dialog-footer">
   			 <el-button @click="addRoomDialogFormVisible = false">取 消</el-button>
   			 <el-button type="primary" @click="addRoomDialogFormVisible = false;handlerAddRoom()">确 定</el-button>
  			</div>
</el-dialog>
</div>
</template>

<script>
	export default{
		name:'StudyRoomList',
		data(){
			return {
				addRoomDialogFormVisible:false,
				formLabelWidth:"80px",
				addRoomForm:{
					name:'',
					type:'',
				},
				getPageTimer:null,
				roomId:'',
				roomList:[
			],
			roomPage:{
				current:1,
				size:10,
				total:0,
				type:'',
			},
			me:{
				
			},
			loading:true,
				page:{
					current:1,
					size:10,
					total:0
				}
			}
		},
		methods:{
			getPageByType(){
				this.roomPage.type=this.$route.query.type
				this.$axios({
					method:'POST',
					url:'room/getPageByType',
					headers:{
						authorization:localStorage.getItem("token")
					},
					data:this.roomPage
				}).then(
					response=>{
						if(response.data.success){
							this.loading=false;
							this.roomPage=response.data.data
						}else{
							this.$message.error(response.data.message)
						}
					},
					error=>{
						console.log(error.message)
					}
				)
			},
			handlerJoin(row){
				this.roomId=row.id;
				console.log("id-->",row.id)
				this.$router.push({
					name:'room',
					query:{
						roomId:row.id
					}
				})
			},
			handlerAddRoom(){
				this.addRoomForm.type=this.$route.query.type
				this.$axios({
					method:'POST',
					url:'room/add',
					headers:{
						authorization:localStorage.getItem("token")
					},
					data:this.addRoomForm
				}).then(
					response=>{
						if(response.data.success){
							this.getPageByType
							this.$message.success("添加成功")
						}else{
							this.$message.error(response.data.message)
						}
					},
					error=>{
						console.log(error.message)
					}
				)
			},
			handlerQuit(){
				this.$router.replace({
					name:'guide'
				})
			},
			handlerCurrentChange(current){
				this.roomPage.current=current
			},
			getMe(){
				this.$axios({
					method:"GET",
					url:"user/me",
					headers:{
						authorization:localStorage.getItem("token")
					}
				}).then(
					response=>{
						if(response.data.success){
							this.me=response.data.data
						}else{
							localStorage.removeItem("token")
							this.$router.replace({
								name:'login'
							})
							this.$message.error(response.data.message)
						}
					},
					error=>{
						console.log(error.message)
					}
				)
			},
			init(){
				this.getMe()
				this.getPageByType()
			},
		},
		props:['type'],
		mounted(){
			this.init()
			/*this.getPageTimer=setInterval(()=>{
				this.getPageByType()
			},3000)*/
		},
		beforeDestroy(){
			clearInterval(this.getPageTimer)
		}
	}
</script>

<style scoped>
	.root{
		padding: 0 10%;
	}
	.RoomList{
		height:100%;
	}
	.button-box{
		height: 90px;
		line-height: 90px;
		border-bottom: 1px solid gray;
		margin-bottom: 20px;
	}
</style>